<li
  data-test-subscription-list-item
  class="flex w-full items-center justify-between py-2.5 px-2.5 hover:bg-color-page-faint"
>
  <LinkTo
    data-test-subscription-list-item-link
    @route="authenticated.product-areas.product-area"
    @model={{dasherize @productArea}}
    class="flex items-center gap-3"
  >
    <Product::Avatar @product={{@productArea}} @size="small" />
    <div
      data-test-subscription-list-item-name
      class="underline-on-hover text-body-300"
    >
      {{@productArea}}
    </div>
  </LinkTo>
  <Product::SubscriptionToggle @product={{@productArea}} @size="small" />
</li>
